<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐品味匹配测试 - 兴趣社交</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        :root {
            --primary-color: #3b82f6;
            --secondary-color: #10b981;
            --accent-color: #f59e0b;
            --danger-color: #ef4444;
            --dark-color: #1e293b;
            --light-color: #f8fafc;
            --gray-color: #94a3b8;
            --border-color: #e2e8f0;
            --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            --transition: all 0.3s ease;
        }
        
        body {
            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
            background-color: #f8fafc;
            color: var(--dark-color);
            line-height: 1.6;
        }
        
        .navbar {
            background-color: white;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .navbar-brand {
            color: var(--primary-color);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .nav-link {
            color: var(--dark-color);
            transition: var(--transition);
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary-color);
        }
        
        .test-header {
            margin-bottom: 30px;
        }
        
        .test-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 15px;
            line-height: 1.3;
        }
        
        .test-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            color: var(--gray-color);
            font-size: 0.9rem;
            margin-bottom: 20px;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .category-badge {
            display: inline-block;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 500;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        
        .test-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 10px;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 30px;
        }
        
        .gallery-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            transition: var(--transition);
        }
        
        .gallery-image:hover {
            transform: scale(1.02);
        }
        
        .test-description {
            font-size: 1.05rem;
            line-height: 1.8;
            margin-bottom: 30px;
            color: #334155;
        }
        
        .test-content {
            background-color: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: var(--card-shadow);
            margin-bottom: 30px;
        }
        
        .section-title {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--primary-color);
            display: inline-block;
        }
        
        .author-card {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px;
            background-color: #f1f5f9;
            border-radius: 10px;
            margin-bottom: 30px;
        }
        
        .author-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .author-info {
            flex: 1;
        }
        
        .author-name {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 5px;
        }
        
        .author-bio {
            color: var(--gray-color);
            font-size: 0.9rem;
            margin-bottom: 10px;
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
        }
        
        .action-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            border-radius: 8px;
            font-weight: 500;
            transition: var(--transition);
            border: none;
            cursor: pointer;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #2563eb;
            transform: translateY(-2px);
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--dark-color);
        }
        
        .btn-outline:hover {
            background-color: #f1f5f9;
            transform: translateY(-2px);
        }
        
        .stat-card {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            box-shadow: var(--card-shadow);
            margin-bottom: 20px;
        }
        
        .stat-value {
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 5px;
        }
        
        .stat-label {
            font-size: 0.9rem;
            color: var(--gray-color);
        }
        
        .question-preview {
            border-left: 4px solid var(--primary-color);
            padding: 15px 15px 15px 20px;
            background-color: rgba(59, 130, 246, 0.05);
            margin-bottom: 20px;
            border-radius: 0 8px 8px 0;
        }
        
        .question-text {
            font-weight: 500;
            margin-bottom: 10px;
        }
        
        .question-options {
            padding-left: 20px;
        }
        
        .question-option {
            margin-bottom: 5px;
        }
        
        .related-tests {
            margin-top: 40px;
        }
        
        .related-test-item {
            display: flex;
            gap: 15px;
            padding: 15px;
            border-radius: 8px;
            background-color: white;
            margin-bottom: 15px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
        }
        
        .related-test-item:hover {
            transform: translateY(-3px);
            box-shadow: var(--hover-shadow);
        }
        
        .related-test-image {
            width: 100px;
            height: 100px;
            border-radius: 6px;
            object-fit: cover;
        }
        
        .related-test-info {
            flex: 1;
        }
        
        .related-test-title {
            font-weight: 600;
            margin-bottom: 5px;
            transition: var(--transition);
        }
        
        .related-test-item:hover .related-test-title {
            color: var(--primary-color);
        }
        
        .related-test-meta {
            font-size: 0.85rem;
            color: var(--gray-color);
        }
        
        .comments-section {
            margin-top: 40px;
        }
        
        .comment-form {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: var(--card-shadow);
        }
        
        .form-control {
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 12px 15px;
            font-size: 0.95rem;
            margin-bottom: 15px;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            outline: none;
        }
        
        .comment-actions {
            display: flex;
            justify-content: flex-end;
        }
        
        .comment-card {
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: var(--card-shadow);
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }
        
        .comment-author {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .author-name {
            font-weight: 500;
        }
        
        .comment-time {
            font-size: 0.85rem;
            color: var(--gray-color);
        }
        
        .comment-content {
            margin-bottom: 15px;
            line-height: 1.6;
        }
        
        .comment-footer {
            display: flex;
            gap: 15px;
            font-size: 0.9rem;
        }
        
        .comment-action {
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--gray-color);
            cursor: pointer;
            transition: var(--transition);
        }
        
        .comment-action:hover {
            color: var(--primary-color);
        }
        
        .comment-action.liked {
            color: var(--danger-color);
        }
        
        .replies {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
            margin-left: 50px;
        }
        
        .reply-form {
            display: flex;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .reply-avatar {
            width: 35px;
            height: 35px;
            border-radius: 50%;
        }
        
        .reply-input {
            flex: 1;
            border-radius: 20px;
            padding: 8px 15px;
            font-size: 0.9rem;
        }
        
        .reply-btn {
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 0 15px;
            font-size: 0.9rem;
        }
        
        .matched-users {
            margin-top: 30px;
        }
        
        .user-card {
            text-align: center;
            padding: 15px;
            background-color: white;
            border-radius: 10px;
            box-shadow: var(--card-shadow);
            transition: var(--transition);
            margin-bottom: 20px;
        }
        
        .user-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--hover-shadow);
        }
        
        .user-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            margin: 0 auto 15px;
            border: 3px solid #f1f5f9;
        }
        
        .user-name {
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .match-percentage {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--secondary-color);
            font-size: 0.85rem;
            font-weight: 500;
            margin-bottom: 10px;
        }
        
        .common-interests {
            font-size: 0.85rem;
            color: var(--gray-color);
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .connect-btn {
            background-color: transparent;
            border: 1px solid var(--primary-color);
            color: var(--primary-color);
            border-radius: 20px;
            padding: 5px 15px;
            font-size: 0.9rem;
            transition: var(--transition);
        }
        
        .connect-btn:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        @media (max-width: 768px) {
            .test-title {
                font-size: 1.6rem;
            }
            
            .action-buttons {
                flex-wrap: wrap;
            }
            
            .action-btn {
                flex: 1;
                justify-content: center;
            }
            
            .replies {
                margin-left: 20px;
            }
            
            .test-gallery {
                grid-template-columns: 1fr;
            }
            
            .related-test-item {
                flex-direction: column;
            }
            
            .related-test-image {
                width: 100%;
                height: 150px;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-compass"></i>
                <span>兴趣社交</span>
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#">兴趣测试</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">交友推荐</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">兴趣社群</a>
                    </li>
                </ul>
                
                <div class="d-flex align-items-center gap-3">
                    <div class="dropdown">
                        <button class="btn btn-secondary dropdown-toggle rounded-circle" type="button" data-bs-toggle="dropdown">
                            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" width="36" height="36" class="rounded-circle">
                        </button>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="#">个人中心</a></li>
                            <li><a class="dropdown-item" href="#">我的测试</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">退出登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="container py-5">
        <!-- 面包屑导航 -->
        <nav aria-label="breadcrumb" class="mb-4">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-gray-color">首页</a></li>
                <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-gray-color">兴趣测试</a></li>
                <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-gray-color">音乐</a></li>
                <li class="breadcrumb-item active" aria-current="page">音乐品味匹配测试</li>
            </ol>
        </nav>
        
        <div class="row">
            <!-- 主要内容区 -->
            <div class="col-lg-8">
                <div class="test-header">
                    <span class="category-badge bg-primary text-white">音乐</span>
                    <span class="category-badge bg-secondary text-white">热门</span>
                    <h1 class="test-title">你的音乐品味能匹配到多少朋友？</h1>
                    
                    <div class="test-meta">
                        <div class="meta-item">
                            <i class="far fa-user"></i> 王音乐
                        </div>
                        <div class="meta-item">
                            <i class="far fa-calendar"></i> 2023-05-15
                        </div>
                        <div class="meta-item">
                            <i class="far fa-clock"></i> 完成时间: 约8分钟
                        </div>
                        <div class="meta-item">
                            <i class="far fa-question-circle"></i> 15题
                        </div>
                    </div>
                    
                    <!-- 测试图片展示 -->
                    <div class="test-gallery">
                        <img src="https://picsum.photos/id/1048/600/400" alt="音乐测试封面图1" class="gallery-image">
                        <img src="https://picsum.photos/id/1073/600/400" alt="音乐测试封面图2" class="gallery-image">
                        <img src="https://picsum.photos/id/1082/600/400" alt="音乐测试封面图3" class="gallery-image">
                    </div>
                </div>
                
                <div class="test-content">
                    <h2 class="section-title">测试介绍</h2>
                    <p class="test-description">
                        这个音乐品味测试将通过15道精心设计的问题，分析你的音乐偏好和品味，从流行、摇滚、古典到爵士、电子等多种音乐风格，全面了解你的音乐审美。完成测试后，系统会根据你的答案，匹配出与你音乐品味最相似的朋友，让你找到可以一起分享音乐、讨论专辑、甚至组队去演唱会的知音。
                    </p>
                    <p class="test-description">
                        无论你是音乐发烧友还是只是偶尔听歌，这个测试都能帮助你发现自己的音乐特质，并找到志同道合的音乐伙伴。测试结果还会生成你的专属音乐性格报告，让你更了解自己的音乐偏好。
                    </p>
                    
                    <h2 class="section-title">问题预览</h2>
                    <div class="question-preview">
                        <div class="question-text">1. 你最喜欢的音乐类型是？</div>
                        <div class="question-options">
                            <div class="question-option">A. 流行音乐</div>
                            <div class="question-option">B. 摇滚音乐</div>
                            <div class="question-option">C. 古典音乐</div>
                            <div class="question-option">D. 电子音乐</div>
                            <div class="question-option">E. 嘻哈/说唱</div>
                        </div>
                    </div>
                    
                    <div class="question-preview">
                        <div class="question-text">2. 你通常通过什么方式发现新音乐？</div>
                        <div class="question-options">
                            <div class="question-option">A. 音乐平台推荐</div>
                            <div class="question-option">B. 朋友推荐</div>
                            <div class="question-option">C. 社交媒体</div>
                            <div class="question-option">D. 电台</div>
                            <div class="question-option">E. 现场演出</div>
                        </div>
                    </div>
                    
                    <h2 class="section-title">测试作者</h2>
                    <div class="author-card">
                        <img src="https://picsum.photos/id/1025/100/100" alt="作者头像" class="author-avatar">
                        <div class="author-info">
                            <div class="author-name">王音乐</div>
                            <div class="author-bio">音乐学硕士，资深音乐评论人，曾在多家音乐媒体发表专栏文章，热爱挖掘不同风格的音乐作品。</div>
                            <button class="btn btn-sm btn-primary">关注作者</button>
                        </div>
                    </div>
                    
                    <!-- 操作按钮 -->
                    <div class="action-buttons">
                        <button class="action-btn btn-primary">
                            <i class="fas fa-play"></i> 开始测试
                        </button>
                        <button class="action-btn btn-outline" id="likeBtn">
                            <i class="far fa-heart"></i> 喜欢 (2,451)
                        </button>
                        <button class="action-btn btn-outline" id="saveBtn">
                            <i class="far fa-bookmark"></i> 收藏
                        </button>
                        <button class="action-btn btn-outline">
                            <i class="far fa-share-alt"></i> 分享
                        </button>
                    </div>
                </div>
                
                <!-- 评论区 -->
                <div class="comments-section">
                    <h2 class="section-title">用户评论 (892)</h2>
                    
                    <!-- 评论表单 -->
                    <div class="comment-form">
                        <textarea class="form-control" rows="4" placeholder="分享你的想法..."></textarea>
                        <div class="comment-actions">
                            <button class="btn btn-primary">发表评论</button>
                        </div>
                    </div>
                    
                    <!-- 评论列表 -->
                    <div class="comment-list">
                        <!-- 评论1 -->
                        <div class="comment-card">
                            <div class="comment-header">
                                <div class="comment-author">
                                    <img src="https://picsum.photos/id/1062/50/50" alt="评论用户头像" class="comment-avatar">
                                    <div>
                                        <div class="author-name">李音乐迷</div>
                                        <div class="comment-time">2023-06-10 14:30</div>
                                    </div>
                                </div>
                            </div>
                            <div class="comment-content">
                                这个测试太准了！通过它我找到了三个和我音乐品味几乎一模一样的朋友，我们现在经常一起去看演唱会，真的很开心能通过这个平台认识他们。问题设计得也很专业，能看出作者对音乐有很深的理解。
                            </div>
                            <div class="comment-footer">
                                <div class="comment-action liked" id="commentLike1">
                                    <i class="fas fa-heart"></i> 128
                                </div>
                                <div class="comment-action reply-toggle" data-comment="1">
                                    <i class="far fa-comment"></i> 回复
                                </div>
                            </div>
                            
                            <!-- 回复框 -->
                            <div class="reply-form d-none" id="replyForm1">
                                <img src="https://picsum.photos/id/64/50/50" alt="你的头像" class="reply-avatar">
                                <input type="text" class="form-control reply-input" placeholder="回复 @李音乐迷...">
                                <button class="reply-btn">回复</button>
                            </div>
                            
                            <!-- 回复列表 -->
                            <div class="replies">
                                <div class="comment-card">
                                    <div class="comment-header">
                                        <div class="comment-author">
                                            <img src="https://picsum.photos/id/1025/50/50" alt="作者头像" class="comment-avatar">
                                            <div>
                                                <div class="author-name">王音乐 <span class="badge bg-primary text-white">作者</span></div>
                                                <div class="comment-time">2023-06-10 15:45</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="comment-content">
                                        很高兴这个测试能帮你找到音乐同好！音乐的魅力就在于分享和交流，希望你们能一直保持这份热爱。
                                    </div>
                                    <div class="comment-footer">
                                        <div class="comment-action">
                                            <i class="far fa-heart"></i> 36
                                        </div>
                                        <div class="comment-action reply-toggle" data-comment="1-1">
                                            <i class="far fa-comment"></i> 回复
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 评论2 -->
                        <div class="comment-card">
                            <div class="comment-header">
                                <div class="comment-author">
                                    <img src="https://picsum.photos/id/1074/50/50" alt="评论用户头像" class="comment-avatar">
                                    <div>
                                        <div class="author-name">张摇滚</div>
                                        <div class="comment-time">2023-06-08 09:15</div>
                                    </div>
                                </div>
                            </div>
                            <div class="comment-content">
                                作为一个摇滚爱好者，我觉得这个测试对摇滚风格的细分很到位，不只是简单的分类，还能区分出不同摇滚子风格的偏好。通过测试匹配到了一个和我一样喜欢90年代另类摇滚的朋友，太惊喜了！
                            </div>
                            <div class="comment-footer">
                                <div class="comment-action" id="commentLike2">
                                    <i class="far fa-heart"></i> 87
                                </div>
                                <div class="comment-action reply-toggle" data-comment="2">
                                    <i class="far fa-comment"></i> 回复
                                </div>
                            </div>
                            
                            <!-- 回复框 -->
                            <div class="reply-form d-none" id="replyForm2">
                                <img src="https://picsum.photos/id/64/50/50" alt="你的头像" class="reply-avatar">
                                <input type="text" class="form-control reply-input" placeholder="回复 @张摇滚...">
                                <button class="reply-btn">回复</button>
                            </div>
                        </div>
                        
                        <!-- 评论3 -->
                        <div class="comment-card">
                            <div class="comment-header">
                                <div class="comment-author">
                                    <img src="https://picsum.photos/id/1066/50/50" alt="评论用户头像" class="comment-avatar">
                                    <div>
                                        <div class="author-name">刘古典</div>
                                        <div class="comment-time">2023-06-05 21:20</div>
                                    </div>
                                </div>
                            </div>
                            <div class="comment-content">
                                希望能增加更多关于古典音乐的问题，比如对不同时期作曲家的偏好，室内乐和交响乐的选择等等。不过总体来说还是很专业的，已经推荐给我的音乐小组了。
                            </div>
                            <div class="comment-footer">
                                <div class="comment-action" id="commentLike3">
                                    <i class="far fa-heart"></i> 42
                                </div>
                                <div class="comment-action reply-toggle" data-comment="3">
                                    <i class="far fa-comment"></i> 回复
                                </div>
                            </div>
                            
                            <!-- 回复框 -->
                            <div class="reply-form d-none" id="replyForm3">
                                <img src="https://picsum.photos/id/64/50/50" alt="你的头像" class="reply-avatar">
                                <input type="text" class="form-control reply-input" placeholder="回复 @刘古典...">
                                <button class="reply-btn">回复</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 加载更多评论 -->
                    <div class="text-center mt-4">
                        <button class="btn btn-outline-primary">
                            <i class="fas fa-comments"></i> 查看更多评论
                        </button>
                    </div>
                </div>
            </div>
            
            <!-- 侧边栏 -->
            <div class="col-lg-4">
                <!-- 测试数据统计 -->
                <div class="row">
                    <div class="col-6">
                        <div class="stat-card">
                            <div class="stat-value">12,543</div>
                            <div class="stat-label">浏览次数</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-card">
                            <div class="stat-value">8,762</div>
                            <div class="stat-label">参与人数</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-card">
                            <div class="stat-value">3,241</div>
                            <div class="stat-label">成功匹配</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="stat-card">
                            <div class="stat-value">4.8</div>
                            <div class="stat-label">平均评分</div>
                        </div>
                    </div>
                </div>
                
                <!-- 匹配到的用户 -->
                <div class="matched-users">
                    <h2 class="section-title">可能匹配的朋友</h2>
                    <div class="row">
                        <div class="col-6">
                            <div class="user-card">
                                <img src="https://picsum.photos/id/1012/100/100" alt="用户头像" class="user-avatar">
                                <div class="user-name">陈音乐</div>
                                <div class="match-percentage">92% 匹配</div>
                                <div class="common-interests">共同兴趣：独立音乐、民谣、现场演出</div>
                                <button class="connect-btn">加为好友</button>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="user-card">
                                <img src="https://picsum.photos/id/1027/100/100" alt="用户头像" class="user-avatar">
                                <div class="user-name">林歌曲</div>
                                <div class="match-percentage">88% 匹配</div>
                                <div class="common-interests">共同兴趣：摇滚、电子、音乐节</div>
                                <button class="connect-btn">加为好友</button>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="user-card">
                                <img src="https://picsum.photos/id/1083/100/100" alt="用户头像" class="user-avatar">
                                <div class="user-name">赵旋律</div>
                                <div class="match-percentage">85% 匹配</div>
                                <div class="common-interests">共同兴趣：爵士、蓝调、黑胶唱片</div>
                                <button class="connect-btn">加为好友</button>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="user-card">
                                <img src="https://picsum.photos/id/1077/100/100" alt="用户头像" class="user-avatar">
                                <div class="user-name">吴乐章</div>
                                <div class="match-percentage">82% 匹配</div>
                                <div class="common-interests">共同兴趣：古典、电影配乐、钢琴</div>
                                <button class="connect-btn">加为好友</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center">
                        <button class="btn btn-outline-primary btn-sm">查看更多匹配</button>
                    </div>
                </div>
                
                <!-- 相关测试推荐 -->
                <div class="related-tests">
                    <h2 class="section-title">相关测试推荐</h2>
                    
                    <div class="related-test-item">
                        <img src="https://picsum.photos/id/1059/200/200" alt="相关测试图片" class="related-test-image">
                        <div class="related-test-info">
                            <div class="related-test-title">摇滚音乐类型测试：找到你的摇滚同好</div>
                            <div class="related-test-meta">
                                <span>张摇滚 · 10题 · 5,678人参与</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="related-test-item">
                        <img src="https://picsum.photos/id/1062/200/200" alt="相关测试图片" class="related-test-image">
                        <div class="related-test-info">
                            <div class="related-test-title">电影原声音乐测试：找到配乐同好</div>
                            <div class="related-test-meta">
                                <span>陈配乐 · 12题 · 4,321人参与</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="related-test-item">
                        <img src="https://picsum.photos/id/1074/200/200" alt="相关测试图片" class="related-test-image">
                        <div class="related-test-info">
                            <div class="related-test-title">K歌之王测试：找到你的合唱伙伴</div>
                            <div class="related-test-meta">
                                <span>刘歌神 · 8题 · 6,789人参与</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-5 mt-10">
        <div class="container">
            <div class="row">
                <div class="col-md-4 mb-4">
                    <h4 class="mb-3 d-flex align-items-center gap-2">
                        <i class="fas fa-compass"></i> 兴趣社交
                    </h4>
                    <p>通过兴趣测试，找到志同道合的朋友，拓展你的社交圈。</p>
                </div>
                <div class="col-md-4 mb-4">
                    <h5 class="mb-3">快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="#" class="text-light text-decoration-none">首页</a></li>
                        <li><a href="#" class="text-light text-decoration-none">兴趣测试</a></li>
                        <li><a href="#" class="text-light text-decoration-none">交友推荐</a></li>
                        <li><a href="#" class="text-light text-decoration-none">兴趣社群</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5 class="mb-3">联系我们</h5>
                    <ul class="list-unstyled">
                        <li class="d-flex align-items-center gap-2"><i class="fas fa-envelope"></i> contact@interestsocial.com</li>
                        <li class="d-flex align-items-center gap-2"><i class="fas fa-phone"></i> 400-888-9999</li>
                    </ul>
                    <div class="mt-3 d-flex gap-3">
                        <a href="#" class="text-light"><i class="fab fa-weixin fa-lg"></i></a>
                        <a href="#" class="text-light"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-light"><i class="fab fa-qq fa-lg"></i></a>
                    </div>
                </div>
            </div>
            <div class="text-center mt-5 pt-3 border-top border-secondary">
                <p>&copy; 2023 兴趣社交 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap 5 JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 点赞功能
        document.getElementById('likeBtn').addEventListener('click', function() {
            const icon = this.querySelector('i');
            let text = this.textContent.trim();
            let count = parseInt(text.match(/\d+/)[0]);
            
            if (icon.classList.contains('far')) {
                // 点赞
                icon.classList.remove('far');
                icon.classList.add('fas', 'text-danger');
                count++;
                this.classList.add('liked');
            } else {
                // 取消点赞
                icon.classList.remove('fas', 'text-danger');
                icon.classList.add('far');
                count--;
                this.classList.remove('liked');
            }
            
            this.innerHTML = `<i class="${icon.classList.value}"></i> 喜欢 (${count})`;
        });
        
        // 收藏功能
        document.getElementById('saveBtn').addEventListener('click', function() {
            const icon = this.querySelector('i');
            
            if (icon.classList.contains('far')) {
                // 收藏
                icon.classList.remove('far');
                icon.classList.add('fas', 'text-warning');
                this.innerHTML = `<i class="${icon.classList.value}"></i> 已收藏`;
            } else {
                // 取消收藏
                icon.classList.remove('fas', 'text-warning');
                icon.classList.add('far');
                this.innerHTML = `<i class="${icon.classList.value}"></i> 收藏`;
            }
        });
        
        // 评论点赞功能
        document.querySelectorAll('.comment-footer .comment-action:has(.fa-heart)').forEach(btn => {
            btn.addEventListener('click', function() {
                const icon = this.querySelector('i');
                let count = parseInt(this.textContent.trim());
                
                if (icon.classList.contains('far')) {
                    // 点赞
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    count++;
                    this.classList.add('liked');
                } else {
                    // 取消点赞
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    count--;
                    this.classList.remove('liked');
                }
                
                this.innerHTML = `<i class="${icon.classList.value}"></i> ${count}`;
            });
        });
        
        // 回复功能切换
        document.querySelectorAll('.reply-toggle').forEach(toggle => {
            toggle.addEventListener('click', function() {
                const commentId = this.getAttribute('data-comment');
                const replyForm = document.getElementById(`replyForm${commentId}`);
                
                // 隐藏所有回复框
                document.querySelectorAll('.reply-form').forEach(form => {
                    form.classList.add('d-none');
                });
                
                // 显示当前回复框
                replyForm.classList.remove('d-none');
                replyForm.querySelector('input').focus();
            });
        });
        
        // 点击页面其他地方隐藏回复框
        document.addEventListener('click', function(event) {
            if (!event.target.closest('.reply-toggle') && !event.target.closest('.reply-form')) {
                document.querySelectorAll('.reply-form').forEach(form => {
                    form.classList.add('d-none');
                });
            }
        });
    </script>
</body>
</html>
    
